<template>
    <el-dialog
        class="ks-edit-table"
        :visible.sync="isEditTable"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="500px"
    >
        <div slot="title" class="title">
            <el-row type="flex" align="middle">
                <el-row>编辑</el-row>
            </el-row>
        </div>
        <div class="content">
            <!-- {{ tableHeadListCopyData }} -->
            <li
                v-for="item in tableHeadListCopyData"
                :key="item.label"
                class="list-group-item"
            >
                <el-row type="flex" class="flex-item">
                    <el-col>
                        <el-checkbox
                            v-model="item.checked"
                            :true-label="1"
                            :false-label="0"
                        >
                            {{ item.label }}
                        </el-checkbox>
                    </el-col>
                    <el-col class="table-width">
                        <span>宽度</span>
                        <el-input v-model="item.width" size="mini" />
                        <span>px</span>
                    </el-col>
                </el-row>
            </li>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:isEditTable', false)">
                取 消
            </el-button>
            <el-button type="primary" @click="handleSaveBtnClick">
                保 存
            </el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    components: {},
    props: {
        // 显示隐藏弹出框
        isEditTable: {
            type: Boolean,
            default: false,
        },
        // 表头list数据 列表的tableHeadList
        tableHeadList: {
            type: Array,
            required: true,
            default: () => [],
        },
        // vuex Model 名称
        storeModelName: {
            type: String,
            required: true,
            default: "",
        },
    },
    data() {
        return {
            // 拷贝数据 避免污染父亲传过来的数据
            tableHeadListCopyData: JSON.parse(
                JSON.stringify(this.tableHeadList)
            ),
        };
    },
    watch: {
        // tableHeadList发生改变 重新拷贝对象进行负值 否则对象是引用关系 再次编辑表头 改动数据会影响到父对象
        tableHeadList(newValue) {
            this.tableHeadListCopyData = JSON.parse(JSON.stringify(newValue));
        },
    },
    methods: {
        // 保存
        handleSaveBtnClick() {
            this.$store.commit(
                `${this.storeModelName}/updateEditTableList`,
                this.tableHeadListCopyData
            );
            this.$emit("update:isEditTable", false);
        },
    },
};
</script>
<style lang="scss" scoped>
.title span {
    font-size: 12px;
    color: #888;
    margin-left: 20px;
}
.ks-edit-table {
    // /deep/.el-dialog__body {
    //     padding-bottom: 0;
    // }
    // /deep/.el-dialog__footer {
    //     padding-bottom: 10px;
    // }

    .flex-item {
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
    }
    .table-width {
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
        align-items: center;
    }

    // /deep/.el-input {
    //     width: 40px;
    //     margin: 0 10px;
    //     input {
    //         border: 0;
    //         text-align: center;
    //         padding: 0 4px;
    //         box-sizing: border-box;
    //         &:hover {
    //             border: 1px solid #eee;
    //         }
    //     }
    // }
    .content {
        max-height: 50vh;
        overflow: auto;
    }
    .flip-list-move {
        transition: transform 0.5s;
    }

    .no-move {
        transition: transform 0s;
    }

    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }

    .list-group {
        min-height: 20px;
    }

    .list-group-item {
        cursor: move;
    }

    .list-group-item i {
        cursor: pointer;
    }
}
</style>


